﻿@page "/query-builder/header-template"

@using BlazorDemos
@using blazor_griddata
@using Syncfusion.Blazor.QueryBuilder
@using Syncfusion.Blazor.DropDowns
@using Syncfusion.Blazor.Buttons

@inherits SampleBaseComponent

<SampleDescription>
    <p>This sample demonstrates the Header Template functionality in QueryBuilder component using DropDownList and Button components. In this sample, user can change the Condition using DropDownList component and adding rules, groups and deleting groups by using Button component.</p>
</SampleDescription>
<ActionDescription>
    <p>
        This sample illustrates how to integrate <a target="" _blank="" href="https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.QueryBuilderTemplates.html#Syncfusion_Blazor_QueryBuilder_QueryBuilderTemplates_HeaderTemplate">HeaderTemplate</a> in the QueryBuilder. This is used for creating custom user interface for the header with custom components and update the rule collection by using the component events. This can be specified by using HeaderTemplate directive. Inside the Template, you can access the data using the implicit named parameter <strong>Context</strong>.
    </p>
    <p>More information about Blazor QueryBuilder Header Template can be found in this <a target="" _blank"" href="https://blazor.syncfusion.com/documentation/query-builder/templates/#header-template">documentation section</a>.</p>
</ActionDescription>

<div class="col-lg-12 control-section">
    <SfQueryBuilder TValue="Employee" @ref="QueryBuilderObj">
        <QueryBuilderRule Condition="and" Rules="@rules"></QueryBuilderRule>
        <QueryBuilderTemplates>
            <HeaderTemplate>
                @{
                    string condition = (string)context.Condition;
                }
                <SfDropDownList ID="@context.ID" @bind-Value="condition" TValue="string" TItem="Condition" CssClass="e-outline" Width="100px" DataSource="@ConditionsList">
                    <DropDownListFieldSettings Text="Text" Value="Value"></DropDownListFieldSettings>
                    <DropDownListEvents TValue="string" TItem="Condition" ValueChange="e => conditionChange(e, context)"></DropDownListEvents>
                </SfDropDownList>
                <div class="e-header">
                    <div class="e-qb-hdr-content">
                        <SfButton Content="Add Group" CssClass="e-custom-button" @onclick="e => addGroup(e, context)"></SfButton>
                    </div>
                    <div class="e-qb-hdr-content">
                        <SfButton Content="Add Condition" CssClass="e-custom-button" @onclick="e => addCondition(e, context)"></SfButton>
                    </div>
                    @if (context.ID.Split("_")[1].IndexOf("0") < 0)
                    {
                        <div class="e-qb-hdr-content">
                            <SfButton Content="Delete Group" CssClass="e-custom-button e-danger" @onclick="e => deleteGroup(e, context)"></SfButton>
                        </div>
                    }
                </div>
            </HeaderTemplate>
        </QueryBuilderTemplates>
        <QueryBuilderColumns>
            <QueryBuilderColumn Field="EmployeeID" Label="Employee ID" Type="ColumnType.Number"></QueryBuilderColumn>
            <QueryBuilderColumn Field="FirstName" Label="First Name" Type="ColumnType.String"></QueryBuilderColumn>
            <QueryBuilderColumn Field="LastName" Label="Last Name" Type="ColumnType.String"></QueryBuilderColumn>
            <QueryBuilderColumn Field="HireDate" Label="Hire Date" Type="ColumnType.Date"></QueryBuilderColumn>
            <QueryBuilderColumn Field="Country" Label="Country" Type="ColumnType.String"></QueryBuilderColumn>
        </QueryBuilderColumns>
    </SfQueryBuilder>
</div>

@code
{
    SfQueryBuilder<Employee> QueryBuilderObj;
    private string groupID;

    public class Employee
    {
        public int EmployeeID { get; set; }
        public string FirstName { get; set; }
        public string LastName { get; set; }
        public DateTime HireDate { get; set; }
        public string Country { get; set; }
    }
    public class Condition
    {
        public string Text { get; set; }
        public string Value { get; set; }
    }

    private List<RuleModel> rules = new List<RuleModel>()
    {
        new RuleModel { Label="First Name", Field="FirstName", Type="String", Operator="equal", Value="Nancy" },
        new RuleModel { Label="Country", Field="Country", Type="String", Operator="equal", Value="USA" }
    };

    public List<Condition> ConditionsList = new List<Condition>() {
        new Condition(){ Text = "AND", Value = "and" },
        new Condition(){ Text = "OR", Value = "or" }
    };

    private void conditionChange(ChangeEventArgs<string, Condition> args, HeaderTemplateModel model)
    {
        if (args.IsInteracted)
        {
            model.Condition = args.Value.ToLower();
        }
    }
    private void addGroup(MouseEventArgs args, HeaderTemplateModel model)
    {
        groupID = model.ID.Split("_")[1];
        QueryBuilderObj.AddGroup(new RuleModel { Condition = "or", Rules = new List<RuleModel>() { new RuleModel() } }, groupID);
    }
    private void addCondition(MouseEventArgs args, HeaderTemplateModel model)
    {
        groupID = model.ID.Split("_")[1];
        QueryBuilderObj.AddRule(new RuleModel(), groupID);
    }
    private void deleteGroup(MouseEventArgs args, HeaderTemplateModel model)
    {
        groupID = model.ID.Split("_")[1];
        QueryBuilderObj.DeleteGroup(groupID);
    }
}

<style>
    .e-custom-button {
        font-size: 13px;
    }

    .e-header {
        display: inline-block;
        float: right;
    }

    .e-qb-hdr-content {
        display: inline-block;
        padding: 0 0 0 12px;
    }
</style>